<template>
  <div :class="selector" @click="$emit('clicki',i)">
    {{tagname}}
  </div>
</template>

<script>
  export default {
    name: "GDAsideSelector",
    props: ["tagname", "active", "i"],
    computed: {
      selector() {
        if (this.active) {
          return 'selector active'
        } else {
          return 'selector'
        }
      }
    }
  }
</script>

<style scoped>
  .selector {
    color: #fff;
    height: 40px;
    line-height: 40px;
    margin: 5px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.5s ease;
  }

  .selector:hover {
    background: #878787;
    transition-duration: 0s;
  }

  .active {
    border: 2px solid #fff;
  }

  .active::after {
    content: '';
    display: block;
    position: relative;
    top: -40px;
    width: 0;
    height: 0;
    border: 20px solid transparent;
    border-left-color: #fff
  }
</style>
